<template>
  <div class="content">
    <!-- 遮罩层 -->
    <div v-if="isShowPicker " class="mask" @click="colseMask" ref="mask"></div>

    <van-sticky>
      <!-- 筛选头部 -->
      <div class="title con">
        <span
          @click="titleClick(item)"
          v-for="item in titleData"
          :class="['dropdown',control[item.value]?'selected':'']"
          :key="item.value"
        >
          <span>{{item.label}}</span>
          <i class="iconfont icon-arrow"></i>
        </span>
      </div>
      <div class="ab">
        <!-- 联级选择器 -->
        <van-picker
          @change="selectedCondition"
          :columns="currentPickerData"
          value-key="label"
          v-if="isShowPicker"
          class="con"
          title="标题"
        />
        <!-- 足部区域 -->
        <div v-if="isShowPicker" class="footer con">
          <button class="button-left" @click="colseMask">取消</button>
          <button class="button-right" @click="onOk">确认</button>
        </div>
      </div>
    </van-sticky>

    <!-- more的区域 -->
    <div class="mask moreMask" v-if="isShowMore" @click="colseMask"></div>
    <div class="more" v-if="isShowMore">
      <div class="wai">
        <div class="td">户型</div>
        <div class="dd">
          <div
            v-for="item in  pickerData.roomType"
            :key="item.value"
            @click="tags(item)"
            :class="['tag',tagsSelected(item.value)]"
          >{{item.label}}</div>
        </div>
        <div class="td">朝向</div>
        <div class="dd">
          <div
            v-for="item in  pickerData.oriented"
            :key="item.value"
            class="tag"
            @click="tags(item)"
            :class="['tag',tagsSelected(item.value)]"
          >{{item.label}}</div>
        </div>
        <div class="td">楼层</div>
        <div class="dd">
          <div
            v-for="item in  pickerData.floor"
            :key="item.value"
            @click="tags(item)"
            :class="['tag',tagsSelected(item.value)]"
          >{{item.label}}</div>
        </div>
        <div class="td">房屋亮点</div>
        <div class="dd">
          <div
            v-for="item in  pickerData.characteristic"
            :key="item.value"
            @click="tags(item)"
            :class="['tag',tagsSelected(item.value)]"
          >{{item.label}}</div>
        </div>
      </div>
      <div class="footer">
        <button class="button-left" @click="colseMask">取消</button>
        <button class="button-right" @click="onOk">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
import { request, getCity } from "../../../utils/index.js";
export default {
  data() {
    return {
      titleData: [
        {
          label: "区域",
          value: "area"
        },
        {
          label: "方式",
          value: "rentType"
        },
        {
          label: "价格",
          value: "price"
        },
        {
          label: "更多",
          value: "more"
        }
      ],
      //   控制标题高亮
      control: {
        area: false,
        rentType: false,
        price: false,
        more: false
      },
      isShowMore: false,
      isShowPicker: false,
      //   所有筛选器的数据
      pickerData: {},
      //   当前筛选器的数据
      currentPickerData: null,
      //   当前筛选器的类型
      currentTitle: null,
      //   要提交的数据
      pushData: {
        rentType: null,
        price: null,
        area: null,
        cityId: null,
        more: null
      },
      // 暂存选择器数据
      area: null,
      rentType: null,
      price: null,
      more: []
    };
  },
  async created() {
    this.getData();
    const res = await getCity();
    this.pushData["cityId"] = res.value;
  },
  methods: {
    //   获取筛选数据
    async getData() {
      const { value } = await getCity();
      console.log(value);
      const res = await request.get("/houses/condition", {
        params: {
          id: value
        }
      });
      console.log(res.data.body);
      this.pickerData = res.data.body;
    },
    // 点击标题事件
    titleClick(item) {
      // 展示联级选择器的操作
      const show = () => {
        this.queren();
        this.isShowPicker = true;
        this.currentTitle = item.value;
        this.control[item.value] = true;
        if (item.value === "area") {
          // 选择区域
          this.pickerData["area"].children[0].children = [
            { label: "", value: null }
          ];
          this.pickerData["subway"].children[0].children = [
            { label: "", value: null }
          ];
          const arr = [this.pickerData["area"], this.pickerData["subway"]];
          this.currentPickerData = arr;
        } else {
          // 选择价格和合租方式
          this.currentPickerData = this.pickerData[item.value];
        }
      };
      if (item.value === "more") {
        // 更多的情况
        this.colseMask();
        if (this.isShowMore) {
          this.isShowMore = false;
          this.control.more = false;
          this.currentTitle = null;
        } else {
          this.currentTitle = "more";
          this.isShowMore = true;
          this.control.more = true;
        }
      } else {
        // 前面三个的情况
        if (this.isShowPicker) {
          if (this.currentTitle === item.value) {
            this.colseMask();
          } else {
            show();
          }
        } else {
          show();
        }
      }

      this.clearData();
    },
    // 联级选择器操作
    selectedCondition(value, item, index) {
      // 区域的操作
      if (this.currentTitle === "area") {
        if (item[2] === "不限" || item[2] === "") {
          this.area = value.getColumnValue(1)["value"];
        } else {
          this.area = value.getColumnValue(2)["value"];
        }
      } else {
        this[this.currentTitle] = item.value;
      }
    },
    // 确定事件
    async onOk() {
      if (this.currentTitle !== "more") {
        this.pushData[this.currentTitle] = this[this.currentTitle];
      } else {
        this.pushData[this.currentTitle] = this[this.currentTitle].join(",");
      }
      this.colseMask();
      await this.$emit("ok", this.pushData);
      this.queren();
    },
    //关闭操作
    colseMask() {
      this.isShowPicker = false;
      this.isShowMore = false;
      this.currentTitle = null;
      this.clearData();
      this.queren();
    },
    // 清除数据
    clearData() {
      this.area = null;
      this.rentType = null;
      this.price = null;
      if (typeof this.pushData.more === "string") {
        this.more = this.pushData.more.split(",");
      } else {
        this.more = [];
      }
    },
    // 确认高亮方法
    queren() {
      if (!this.pushData.area) {
        this.control.area = false;
      } else {
        this.control.area = true;
      }
      if (!this.pushData.price) {
        this.control.price = false;
      } else {
        this.control.price = true;
      }
      if (!this.pushData.rentType) {
        this.control.rentType = false;
      } else {
        this.control.rentType = true;
      }
      if (!this.pushData.more) {
        this.control.more = false;
      } else {
        this.control.more = true;
      }
    },
    // 标签点击事件
    tags(item) {
      const result = this.more.indexOf(item.value);
      if (result === -1) {
        this.more.push(item.value);
      } else {
        this.more.splice(result, 1);
      }
    },
    tagsSelected(value) {
      const result = this.more.indexOf(value);
      if (result === -1) return "";
      return "tagSelected";
    }
  },
  computed: {
    isHi() {
      return this.isShowMore || this.isShowPicker;
    }
  },
  watch: {
    isShowMore() {
      this.$emit("isHi", this.isHi);
    },
    isShowPicker() {
      this.$emit("isHi", this.isHi);
    }
  }
};
</script>
<style lang="less" scoped>
.ab {
  position: absolute;
}
.title {
  color: #333333;
  border-bottom: 1px solid #cccccc;
  height: 53px;
  display: flex;
  .dropdown {
    flex-grow: 1;
    display: flex;
    font-size: 17px;
    justify-content: center;
    align-items: center;
    .icon-arrow {
      margin-left: 3px;
    }
  }
}
.selected {
  color: #21b97a;
}
.mask {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
}
.button-left,
.button-right {
  display: inline-block;
  line-height: 50px;
  text-align: center;
  height: 50px;
  width: 125px;
  color: #21b97a;
  border: 1px solid #cccccc;
  background: #ffffff;
}
.button-right {
  background: #21b97a;
  color: #ffffff;
  width: 250px;
}
.con {
  position: relative;
  z-index: 2 !important;
  background: #ffffff;
}
.more {
  z-index: 1000;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 80px;
  background: rgb(255, 255, 255);
  padding-bottom: 50px;
  .footer {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    .button-left {
      width: 98px;
    }
    .button-right {
      width: 198px;
    }
  }
  .wai {
    padding: 0 15px;
    width: 100%;
    height: 617px;
    overflow: auto;
    .td {
      font-size: 15px;
      margin: 20px 0;
    }
    .dd {
      margin-left: 30px;
      border-bottom: 1px solid #cccccc;
      .tag {
        display: inline-block;
        width: 75px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #cccccc;
        margin: 0 20px 20px 0px;
        text-align: center;
        color: #808080;
        border-radius: 3px;
        font-size: 12px;
      }
    }
  }
}
.tagSelected {
  border: 1px solid #21b97a !important;
  color: #21b97a !important;
  background-color: #defaef !important;
}
.moreMask {
  z-index: 100;
}
</style>
